<template>
	<view>
		<view class="topBlock">
			<progress :percent="wordProgress" stroke-width="14" activeColor="#838ec7" />
		</view>
		<div class="backBox" @click="openWordInfo">
			<view class="cardBox"
				:style="{ transform: `translate(${cardTranslateX}px, ${cardTranslateY}px)`,opacity:cardOpacity }"
				@touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd" >
				<word-card :word-data="curWordData"></word-card>
				<view class="know tag" v-show="know">认识</view>
				<view class="unknow tag" v-show="unknow">不认识</view>
				<view class="fuzzy tag" v-show="fuzzy">模糊</view>
				<view class="mastered tag" v-show="mastered">已掌握</view>
			</view>
			<view  class="wordInfo" v-if="isShowInfo" >
				<view class="wordInfoContainer" >
					<view class="closeBtn" @click.stop="isShowInfo = false">
						<uni-icons type="closeempty" size="30"></uni-icons>					
					</view>
					<view class="wordInfoContent">
						<word-info :info-data="infoData"></word-info>
					</view>
				</view>
				
			</view>
		</div>
	</view>
</template>

<script>

	export default {
		data() {
			return {
				wordsDatas: [], // 当前要学习的所有单词的数组
				wordProgress: 20, // 单词进度
				curWordData: {
					id:1,
					word: "abandon", // 单词
					symbol: "[əˈbændən]", // 音标
					example_en: "The scheme's investors decided to abandon the project.", // 例句
					example_zh: "项目投资者决定放弃该工程。", // 例句
					choices: [],
					// choices: [
					// 	"n. 议题,问题,期刊号;一次发行额,发行,子女",
					// 	"n. 议题,问题,期刊号;一次发行额,发行,子女",
					// 	"n. 议题,问题,期刊号;一次发行额,发行,子女",
					// 	"n. 议题,问题,期刊号;一次发行额,发行,子女",
					// ], // 选择题 
					translate: "v. 遗弃丢弃\nn. 放任,放纵", // 翻译
					isShowBtn: true, // 是否显示下方按钮
				},
				startX: 0, // 手指按下去的横坐标
				startY: 0, // 手指按下去的纵坐标
				cardTranslateX: 0, // x移动距离
				cardTranslateY: 0, // y移动距离
				cardOpacity: 1, // 卡片透明度
				know: false, // 认识
				unknow: false, // 不认识
				fuzzy: false, // 模糊、
				mastered: false, // 已经掌握
				isShowInfo:false, // 是否显示单词解释
				infoData:{
					id:1,
					word: "abandon", // 单词
					symbol: "[əˈbændən]", // 音标
					example: "1. The scheme's investors decided to abandon the project.\n项目投资者决定放弃该工程。", // 例句
					translate: "v. 遗弃丢弃\nn. 放任,放纵", // 翻译
				}

			}
		},
		created() {
			// this.getWordData()
		},
		methods: {
			getWordData() {
				this.wordsDatas = getWordsData()
				console.log(this.wordsDatas)
			},
			onTouchStart(e) {
				this.startX = e.touches[0].clientX
				this.startY = e.touches[0].clientY
			},
			onTouchMove(e) {
				const curX = e.touches[0].clientX
				const curY = e.touches[0].clientY
				this.cardTranslateX = curX - this.startX
				this.cardTranslateY = curY - this.startY
				this.resetStatus()
				if (Math.abs(this.cardTranslateX) > Math.abs(this.cardTranslateY)) {
					if (this.cardTranslateX < 0) {
						this.unknow = true
					} else {
						this.know = true
					}
				} else {
					if (this.cardTranslateY < 0) {
						this.mastered = true
					} else {
						this.fuzzy = true
					}
				}
			},
			onTouchEnd() {

				// TODO: 确定最终状态

				// 重置卡片状态和位置
				this.startX = 0;
				this.startY = 0;
				if (Math.abs(this.cardTranslateX) > 30 || Math.abs(this.cardTranslateY) > 30)
					this.animateCard()
				else {
					this.cardTranslateX = 0
					this.cardTranslateY = 0
					this.resetStatus()
				}
			},
			// 卡片延迟执行复位
			animateCard() {
				this.cardOpacity = 0
				setTimeout(() => {
					this.resetStatus()
					this.cardTranslateX = 0
					this.cardTranslateY = 0
					this.cardOpacity = 1
				}, 300)
			},
			// 重置状态
			resetStatus() {
				this.know = false
				this.unknow = false
				this.fuzzy = false
				this.mastered = false
			},
				
			openWordInfo(){
				let id = this.curWordData
				this.isShowInfo = true
			},
		}
	}
</script>

<style>
	.topBlock {
		width: 17.81rem;
		margin: 1rem auto;
	}

	.backBox {
		position: relative;
		width: 18.75rem;
		height: 39.57rem;
		margin: 0 auto;
		border-radius: 0.63rem;
		background-color: #fbfbfb;
	}

	.cardBox {
		position: relative;
		transition: opacity 0.3s;
	}

	.cardBox .tag {
		position: absolute;
		width: 5.44rem;
		height: 2.44rem;
		line-height: 2.44rem;
		border-radius: 0.63rem 0.63rem 0.63rem 0.63rem;
		font-size: 0.88rem;
		text-align: center;
		font-family: -apple-system;
		border: 0.13rem solid;
		transition: all 0.2s;
	}

	.cardBox .know {
		left: 1rem;
		top: 1.5rem;
		transform: rotateZ(-30deg);
		border-color: #84ba6b;
		color: #84ba6b;
	}

	.cardBox .unknow {
		right: 1rem;
		top: 1.5rem;
		transform: rotateZ(30deg);
		border-color: #f0928f;
		color: #f0928f;
	}

	.cardBox .fuzzy {
		left: 50%;
		transform: translateX(-50%);
		top: 1rem;
		border-color: #7d98f4;
		color: #7d98f4;
	}

	.cardBox .mastered {
		left: 50%;
		transform: translateX(-50%);
		bottom: 5rem;
		border-color: #7d98f4;
		color: #7d98f4;
	}
	.wordInfo{
		position:absolute;
		top: 0;
		width: 100%;
		height: 100%;
		background-color:  #f5f5f5;
		z-index: 99;
		animation: fadein 0.3s;
	}
	
	@keyframes fadein {
		from {
			top: 1rem;
			opacity: 0;
		}
	
		to {
			top: 0;
			opacity: 1;
		}
	}
	
	@keyframes fadeout {
		from {
			top: 3rem;
			opacity: 1;
		}
	
		to {
			top: 2.5rem;
			opacity: 0;
		}
	}
	.wordInfoContainer{
		position: relative;
	}
	.wordInfoContainer .closeBtn{
		position: absolute;
		top: 0.5rem;
		right: 0.5rem;
	}
</style>